<template>
	<view class="add-member">
		<u-form labelPosition="left" :model="formData" :rules="rules" labelWidth="240rpx" ref="form">
			<view class="form-label-top margin-top-3">
				<u-form-item label="朋友姓名" prop="name" required>
					<view class="d-flex justify-space-between">
						<view>
							<u-input v-model="formData.name" placeholder="请输入朋友姓名" border="none" @input="fpNumInput" />

							<!-- <view style="margin-top: 36rpx;">
								<u-radio-group v-model="formData.sex">
									<u-radio label="男" :name="1" />
									<u-radio label="女" :name="0" customStyle="margin-left: 60rpx;" />
								</u-radio-group>
							</view> -->
						</view>
						<image @click="avatarimage" v-if="url_phoneimg != ''"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d486f37c1f8b7458c01bc2243e0333f252f2b33a.png"
							mode="" style="width: 30rpx; height: 30rpx;position: absolute;right: 20rpx;z-index: 999;">
						</image>
						<image style="width: 144rpx; height: 144rpx;" v-if="url_phoneimg != ''" :src="url_phoneimg">
						</image>
						<u-upload v-else :fileList="fileList1" name="1" width="70" height="70" @afterRead="afterRead"
							@delete="deletePic" multiple :maxCount="1" />
					</view>
				</u-form-item>
			</view>
			<!-- <u-form-item label="朋友姓名" prop="name" required>
				<u-input v-model="formData.name" placeholder="请输入朋友姓名" border="none" type="text" />
			</u-form-item> -->
			<u-form-item label="朋友电话" prop="tel" required>
				<u-input v-model="formData.tel" placeholder="请输入朋友电话" border="none" type="number" />
			</u-form-item>
			<!-- <u-form-item label="自己电话" prop="phone" required>
				<u-input v-model="formData.phone" placeholder="请输入联系电话" border="none" type="number" />
			</u-form-item> -->
			<!-- <view class="" style="width: 100%;height: 300rpx;background-color: #ffffff;">
				<textarea placeholder=" 请填写备注信息" class="input-textare" style=" margin-top: 20rpx;padding: 10rpx;"
					v-model="order_remarks" />
			</view> -->

		</u-form>

		<view class="bottom-add-btn" v-if="type == 0">
			<u-button text="确认添加" shape="circle" @click="add"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
		<view class="bottom-add-btn" v-if="type == 1">
			<u-button text="确认修改" shape="circle" @click="add"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				order_remarks:'',
				url_phone: '',
				formData: {
					name: '', //名字
					phone: '', //联系电话
					tel: '',
					avatar: '', //头像
				},
				fileList1: [],
				type: 0,
				rules: {
					'formData.name': {
						required: true,
						message: '请输入朋友姓名',
						trigger: ['change'],
					},
					'formData.phone': {
						required: true,
						message: '请输入自己电话',
						trigger: ['change'],
					},
					'formData.tel': {
						required: true,
						message: '请输入朋友电话',
						trigger: ['change'],
					},

				},
				url_phoneimg: '',
			}
		},
		onLoad(options) {
			this.formData.name = options.friend_name
			this.formData.tel = options.friend_phone
			this.formData.id = options.id
			this.formData.phone = options.phone
			this.type = options.type
			this.url_phoneimg = options.avatar
		},
		methods: {
			fpNumInput(e) {
				console.log(e,'222')
				// const o = e.target;
				const inputRule =/[^\u4E00-\u9FA5]/g
				this.$nextTick(function() {
					this.formData.name = e.replace(inputRule, '');
					
				})
			},
			avatarimage() {
				this.url_phoneimg = ''
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test',
							project_id: getApp().globalData.projectId,
							app_id: this.$https.weixinAppId,

						},
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_phone = result.data.url
							console.log(this.url_phone, '111')
							setTimeout(() => {
								resolve(this.url_phone)
							}, 1000)
						}
					});
				})
			},
			// async bfEdit(){
			// 	let params = {
			// 		project_id: getApp().globalData.projectId,		app_id: this.$https.weixinAppId,
			// 		id: this.formData.id,
			// 		friend_name: this.formData.name,
			// 		avatar: this.url_phone, //头像
			// 		friend_phone: this.formData.tel,
			// 	}
			// 	console.log(params,'1221')
			// 	let res = await venues.bfEdit(params)
			// 	if (res.code == 1) {
			// 		console.log(res,'1144')
			// 		uni.navigateBack({
			// 				delta:1,//返回层数，2则上上页
			// 			})

			// 	}
			// },
			async add() {
				if (this.url_phoneimg != '' && this.url_phoneimg != undefined) {
					this.url_phone = this.url_phoneimg
				}
				let that = this
				// if (!that.formData.phone) { //判断如果手机号为空，提示用户输入手机号
				// 	uni.showToast({
				// 		title: '请输入自己手机号',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else 
				// if (!reg.test(that.formData.phone)) { //判断手机号格式时候正确
				// 	uni.showToast({
				// 		title: '请输入自己正确的手机号',
				// 		icon: 'none'
				// 	})
				// 	that.formData.phone = ''
				// 	return
				// } else 
				if (!that.formData.tel) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入朋友的手机号',
						icon: 'none'
					})
					return
				} else if (that.formData.name == '') { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入朋友姓名',
						icon: 'none'
					})
					return
				}else {
					// uni.showLoading({
					// 	title: "加载中",
					// });
					let params = {
						friend_name: this.formData.name, //名字
						friend_phone: this.formData.tel,
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						open_id: uni.getStorageSync("openid"),
						avatar: this.url_phone, //头像
					};
					let res = await venues.Createfriends(params);
					console.log(res, '22222')
					if (res.code == 1) {
						// uni.hideLoading();
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})

					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-member {
		min-height: 100vh;
		background-color: #f6f6f6;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

		/deep/.u-form {
			.u-form-item {
				background-color: #fff;
			}

			.u-form-item__body {
				padding: 30rpx;
			}

			.group {
				margin-top: 20rpx;
			}

			.u-form-item__body__right__message {
				margin-left: 270rpx !important;
			}
		}
	}
</style>
